<template>
<!-- 页面标题区 -->
  <a-row  class="page-content-header">
    <span class="title">{{routeName}}</span>
  </a-row>
  <a-row class="page-content-body">
    <div class="container">
      <div v-for="pic in pictureList">
        <a-avatar shape="square" :src="pic" :size="{ xs: 12, sm: 16, md: 20, lg: 32, xl: 60, xxl: 50 }"  class="image"/>
      </div>
      <div>
        <a-avatar shape="square" :size="{ xs: 24, sm: 32, md: 40, lg: 64, xl: 80, xxl: 100 }"  class="add-image" @click="showModal">
          <template #icon>
            <div class="plus-icon">
              <plus-outlined />
            </div>
          </template>
        </a-avatar>
      </div>

      <a-modal width="1200px" v-model:visible="visible" centered="true" title="添加App" :footer="null">
        <a-form :model="formState" name="App_add" autocomplete="true" @finish="addApp">
          <!-- 一行两列 -->
          <a-row>
            <!-- 第一列 -->
            <a-col :span="12" style="padding: 0 8%;">
              <a-form-item label="AppKey" name="AppKey"  has-feedback :rules="[{ required: true, message: '请输入唯一标识AppKey' }]" class="form-item-style1">
                <a-input  placeholder="请输入唯一标识AppKey" size="middle" v-model:value="formState.AppKey"></a-input>
              </a-form-item>
              <a-form-item label="App名称" name="name"  has-feedback :rules="[{ required: true, message: '请输入App名称' }]" class="form-item-style1">
                <a-input  placeholder="请输入App名称" size="middle" v-model:value="formState.name"></a-input>
              </a-form-item>
              <a-form-item label="App密码" name="password"  has-feedback :rules="[{ required: true, message: '请输入App密码'}]" class="form-item-style1">
                <a-input  placeholder="请输入App密码" size="middle" v-model:value="formState.password"></a-input>
              </a-form-item>
              <a-form-item label="App分组" name="groupName" class="form-item-style2">
                <a-select ref="groupName" v-model:value="formState.groupName" style="width: 168px" @change="handleChange">
                  <a-select-option value="just">Just</a-select-option>
                  <a-select-option value="2">Just2</a-select-option>
                  <a-select-option value="3">Just3</a-select-option>
                </a-select>
                <a-button type="primary" style="margin-left: 3%;">&nbsp;分&nbsp;组&nbsp;</a-button>
              </a-form-item>
              <a-form-item label="App地址" name="AppAddress" class="form-item-style2">
                <a-input placeholder="请输入App地址" size="middle" v-model:value="formState.AppAddress"></a-input>
              </a-form-item>
              <a-form-item label="App类型" name="AppType" :rules="[{ required: true, message: '请选择App类型' }]" class="form-item-style1">
                <a-checkbox-group v-model:value="formState.AppType" :options="appType" />
              </a-form-item>

              <a-form-item label="功能类型" name="functionType" has-feedback :rules="[{ required: true, message: '请选择功能类型' }]" class="form-item-style1">
                <a-select v-model:value="formState.functionType">
                  <a-select-option value="1">just1</a-select-option>
                  <a-select-option value="2">Just2</a-select-option>
                  <a-select-option value="3">Just3</a-select-option>
                </a-select>
              </a-form-item>

              <a-form-item label="App图标" name="AppIcon" class="form-item-style2">
                <a-button type="primary" style="margin-right: 62%;;">&nbsp;上传图标&nbsp;</a-button>
              </a-form-item>
              </a-col>
              <!-- 第二列 -->
              <a-col :span="12">
                <a-form-item label="启动自定义角色" name="customRole" class="form-item-style1">
                  <a-radio-group v-model:value="formState.customRole" :options="customRole" />
                </a-form-item>
                <a-form-item label="接入位置" name="accessLocation" class="form-item-style3">
                  <a-radio-group v-model:value="formState.accessLocation" v-for="item in accessLocation">
                    <a-radio :value=item.value :disabled=item.disabled>{{ item.value }}</a-radio>
                  </a-radio-group>
                </a-form-item>
                <a-form-item label="服务域名-ip" name="serviceIP" class="form-item-style1" style="margin-left: 4%;">
                  <a-textarea v-model:value="formState.serviceIP" placeholder="请输入服务域名-ip"/>
                </a-form-item>
                <a-form-item label="阿里OSS" name="AliOss" class="form-item-style3">
                  <a-radio-group v-model:value="formState.AliOss" :options="AliOss" />
                </a-form-item>
                <a-form-item label="回调标识" name="callbackID" class="form-item-style3" >
                  <a-radio-group v-model:value="formState.callbackID" :options="callbackID" />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row>
              <a-form-item style="margin:3% 3% 0 auto;">
                <a-button key="back" @click="handleCancel">返回</a-button>
                <span>&emsp;</span>
                <a-button key="submit" type="primary"  html-type="submit">确定</a-button>
              </a-form-item>
            </a-row>
        </a-form>
      </a-modal>
    </div>
  </a-row>


</template>

<script setup>
import { PlusOutlined } from '@ant-design/icons-vue';
import { ref,reactive } from 'vue';
import { computed } from 'vue';
import { useRoute } from 'vue-router';
import { notification } from 'ant-design-vue';
const route = useRoute(); // 使用 Vue Router 的钩子函数 useRoute 获取当前路由对象
const routeName = computed(() => route.meta.title);// 计算属性，获取当前路由的元数据中的标题

//表单状态参数
const loading = ref (false);
const visible = ref(false);
//表单选项参数
const appType = ['PC', 'App', '微信小程序'];
const customRole = ['是', '否']
const accessLocation=[
  { value: 'lframe' ,disabled: false},
  { value: '微应用' , disabled: true },
  { value: '嵌入', disabled: false }
];
const AliOss = ['是', '否']
const callbackID = ['启用', '不启用']
//初始化表单
const formState = reactive({
    AppKey:'',
    name: '',
    password:'123456',
    groupName: '',
    AppAddress: '',
    AppType: '',
    functionType: '2',
    customRole: '',
    accessLocation: '',
    serviceIP: '',
    AliOss: '',
    callbackID:'',
})

// 提交表单，添加应用
const addApp = (values) => {
  console.log('表单', values);
  notification.open({
    message: '提交成功',
    description: '已提交信息',
    style: {color:'rgb(41, 159, 37)'},
  })
  visible.value = false;
}
//打开对话框
const showModal = () => {
  visible.value = true;
};
//关闭对话框
const handleCancel = () => {
  visible.value = false;
};

const pictureList = [
    "https://cdn9-banquan.ituchong.com/weili/ml/333579544320016398.jpeg",
    "https://cdn3-banquan.ituchong.com/weili/ml/1434115693633470506.jpeg",
    "https://cdn6-banquan.ituchong.com/weili/ml/944992886503374924.jpeg",
    "https://p3-ug-imc.byteimg.com/img/tos-cn-i-gflu06s87d/61165417942f4c01be365813ebd7a43b~tplv-gflu06s87d-image.jpeg",
    "https://cdn6-banquan.ituchong.com/weili/ml/1823791573838725131.jpeg",
]
</script>

<style lang="less" scoped>
.page-content-header{
  padding: 2% 0% 0% 5%;
  margin:0
}
.title {
  display: block;
  float: left;
  color: rgba(0, 0, 0, 0.85);
  font-weight: 600;
  font-size: 18px;
  line-height: 24px;
}
.page-content-body{
    height: 80vh;
    .container{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        padding-top: 3%;
        .image{
            border-radius:18px;
            margin-left: 20px;
            background-color: white;
            border: 1px solid #eaeaea;
            box-shadow: 0 0 10px rgba(106, 106, 106, 0.4);
        }
        .add-image{
            border-radius:20px;
            margin-left: 50px;
            background-color: white;
            border: 1px solid #eaeaea;
        }
        .plus-icon{
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height:100%;
            color: gray;
            font-size: 20px;
        }


    }
}
.form-item-style1{
    font-weight: bold;
    font-size: 16px;
}
.form-item-style2{
    font-weight: bold;
    font-size: 16px;
    padding-left: 4%;
}
.form-item-style3{
  font-weight: bold;
  font-size: 16px;
  margin-left: 8%;
}
</style>
